<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./scripts/jquery-3.6.1.js"></script>
    </head>
    <body>
        <button id="btn01">点我一下</button>
        <ul>
            <li id="swk">孙悟空</li>
            <li id="zbj">猪八戒</li>
            <li>沙和尚</li>
            <li>唐僧</li>
            <li>白骨精</li>
        </ul>

        <script>
            /* 
            jQuery对象
                - 通过jQuery核心函数获取到的对象就是jQuery对象
                - jQuery对象是jQuery中定义的对象
                    可以将其理解为是DOM对象的升级版，在jQuery对象中为我们提供了很多简单易用的方法
                        来帮助我们简化DOM操作
                - jQuery对象本质上是一个DOM对象的数组（类数组）
                    可以通过索引获取jQuery对象中的DOM对象
                - 当我们修改jQuery对象时，它会自动修改jQuery中的所有元素
                    这一特点称为jQuery的隐式迭代
                - 通常情况下，jQuery对象方法的返回值依然是一个jQuery对象
                    所以我们可以在调用一个方法后继续调用其他的jQuery对象的方法
                    这一特性，称为jQuery对象的 链式调用

                    

        */
            $("#btn01").click(function () {
                var $li = $("li")
                // alert($li[0].textContent)

                // $li.text("哈哈哈")

                var text = $li.text() // 读取文本，返回所有标签中的文本
                var id = $li.attr("id") // 读取属性时，返回第一个标签的属性

                // alert(id)

                // var result = $li.text("新的文本内容")
                // alert(result === $li)

                $li.text("新的文本内容").css("color", "red")
            })
        </script>
    </body>
</html>
